<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作用于插槽</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
							
		<div id="root">
			当子组件Dom结构需要由外部传递时使用作用域插槽
			作用于插槽以template模板的形式使用  必须使用slot-scope接收传递的数据-
			<child> 
				<template slot-scope="scope">
					<h1>{{scope.item}}</h1>
				</template>
			</child>
			<childtwo>
					<template>
						<thead slot="header">
							<tr>
								<th>姓名</th>
								<th>年龄</th>
							</tr> 
						</thead>
					</template> 
					<template slot="fotter">
						<tr>
							<th>总计</th>
							<th>128</th>
						</tr>
					</template>
					<template slot-scope="userscope">
						<tr>
							<td>{{userscope.user.name}}</td>
							<td>{{userscope.user.age}}</td>
						</tr>
					</template> 
			</childtwo>
		</div>
		
		<script>
			Vue.component('child', {
				data:function(){
					return {
						arrayData:[1,2] 
					}
				},
				template:`
						<div>
							<ul>
								<slot v-for="item of arrayData" :item=item ></slot>
							</ul> 
						</div>
					`,
				methods:{
					
					
				}
			});
			
			Vue.component('childtwo',{
				data:function(){
					return {
						titles: {name:'姓名', age:'年龄1'},
						list:[
							{name:'zlj',age:28},
							{name:'inc', age:100}
						]
					}
				},
				template:
				`
					<div>
						<table>
							<slot name="header"></slot>
							<tbody slot="tbody">
								<slot v-for="thisItem of list" :user='thisItem'> </slot>
							</tbody>
							<slot name="fotter"></slot>
						</table>
					</div>
				`,
				methods:{
					
				}
			});
			
			
			var vm = new Vue({
				el:'#root'
			});
			
		</script>
	</body>
</html>
